<template>
	<view :class="`pages-${isDrawer}`">
		<mvBar :mysNavConfig="mysNavConfig" v-if="!isDrawer"></mvBar>
		<view class="title" v-if="isDrawer"><text>服务信息</text></view>
		<view class="profile">
			<view class="userinfo">
				<view class="">
					<image class="avatar" :src="user.avatar + '?t=' + timestamp"></image>
				</view>
				<view class="">
					<view class="username">
					用户名: {{ user.username || 'Visitor' }}
					</view>
					<view class="uid">
						服务器: {{ user.serverip }}
					</view>
				</view>
			</view>
			<view class="button" v-if="!token">
				<view class="signin" @click="signin">{{ $t('signin') }}</view>
			</view>
		</view>
		<view class="list">
			<view class="menu" v-for="(item, index) in menu" :key="index" @click="clickMenu(index)">
				<view class="info">
					<uni-icons custom-prefix="iconfont" :type="item.icon"
					:color="isDrawer ? '#000' : '#eee'"
					  class="icon" size="20"></uni-icons>
					<view class="">
						{{ item.text }}
					</view>
				</view>
				<view class="indicator" v-if="item.forward">
					<uni-icons type="forward" :color="isDrawer ? '#000' : '#eee'" class="icon"></uni-icons>
				</view>
			</view>
		</view>

		<view class="bottom" v-if="token && !user.guest">
			<button class="logout" type="warn" @click="logout">
				{{ $t('logout') }}
			</button>
		</view>

		<uni-popup type="bottom" ref="choosingLanguage">
			<view class="choosingLanguage" :style="{backgroundColor: isDrawer ? '#f7f7f7' : '#181818'}">
				<view class="setting">{{ $t('languagesetting') }}</view>
				<view class="option" @click="selectedLanguage('en')">
					<view class=""> {{ $t('english') }} </view>
					<view v-if="locale == 'en'">
						<uni-icons type="checkmarkempty" :color="isDrawer ? '#000' : '#eee'" class="icon"></uni-icons>
					</view>
				</view>
				<view class="option" @click="selectedLanguage('zh-Hans')">
					<view class="">
						{{ $t('chinese') }}
					</view>
					<view v-if="locale == 'zh-Hans'">
						<uni-icons type="checkmarkempty" :color="isDrawer ? '#000' : '#eee'" class="icon"></uni-icons>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup type="bottom" ref="feedbackInfo">
			<view class="choosingLanguage" :style="{backgroundColor: isDrawer ? '#f7f7f7' : '#181818'}">
				<view class="setting">{{ $t('feedback') }}</view>
				<view class="option">
					<view class=""> 目前已适配IOS设备，需要安装包请联系</view>
				</view>
				<view class="option">
					<view class=""> QQ： 1451023420</view>
				</view>
				<view class="option">
					<view class="">邮箱：1451023420@qq.com</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import store from '@/store/index.js'
	import request from '@/common/request'
	import mysNavConfig from '@/pages/profile/profileNavConfig.js';
	import mvBar from "@/components/mys_navBar/mysNavBar";

	export default {
		name: 'profile',
		props: {
		    isDrawer: {
		      type: Boolean,
		      default: false
		    }
		},
		components: {
			mvBar
		},
		data() {
			return {
				index: 0,
				timerDblClick: null,
				timestamp: Date.now(),
				mysNavConfig: mysNavConfig,
			}
		},
		computed: {
			...mapState({
				user: (state) => state.user,
				token: (state) => state.token
			}),
			locale: function() {
				return this.$i18n.locale
			},
			menu: function() {
				return [
					{
						icon: 'icon-renwu',
						text: this.$t('clearcache'),
						forward: false
					},
					{
						icon: 'icon-shequ',
						text: this.$t('language'),
						forward: true
					},
					{
						icon: 'icon-guanyuwomen',
						text: this.$t('feedback')
					}
				]
			}
		},
		onShow() {
			this.timestamp = Date.now();
		},
		methods: {
			clickMenu(index) {
				if (index == 0) {
					this.$store.commit('clearAllData');
					uni.showToast({
						title: '清除缓存完成',
						icon: 'success',
					})
				} else if (index == 1) {
					this.$refs.choosingLanguage.open('bottom')
				} else if (index == 2) {
					this.$refs.feedbackInfo.open('bottom')
				}
			},
			selectedLanguage(language) {
				uni.setLocale(language)
				this.$i18n.locale = language
				setTimeout(() => {
					this.$refs.choosingLanguage.close()
				}, 300)
			},
			signin() {
				uni.navigateTo({
					url: '/pages/profile/login'
				})
			},
			logout() {
				store.commit('logout')
				uni.setStorageSync('token','')
				uni.reLaunch({
				  url: '/pages/profile/login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages-true{
		color: #181818;
		padding-top: 44px;
	}
	.profile {
		padding: 10px 5px 20px 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.profile .avatar {
		background-image: url('@/static/default.jpg');
		background-repeat: no-repeat;
		object-fit: cover;
		background-position: center center;
		background-size: 100% 100%;
		width: 60px;
		height: 60px;
		border-radius: 100px;
		margin-right: 10px;
		border: 1px solid rgba(0, 0, 0, .2);
	}

	.profile .userinfo {
		display: flex;
	}

	.profile .userinfo .username {
		font-size: 1rem;
		// font-weight: bold;
		margin: 6px 0;
	}

	.profile .userinfo .uid {
		font-size: 1rem;
	}

	.profile .signin {
		padding: 5px 10px;
		border-radius: 5px;
		background-color: #2b2b2b;
	}

	.list {
		padding: 10px 2px;
	}

	.list .menu {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 18px 0;
	}

	.list .menu .info {
		font-size: 1rem;
		display: flex;
		align-items: center;
	}

	.list .menu .info .icon {
		margin: 0 10px;
	}

	.choosingLanguage {
		height: 400px;
		background-color: #181818;
		padding: 10px 20px;
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;

		.setting {
			text-align: center;
			font-weight: bold;
		}

		.option {
			padding: 20px 0;
			display: flex;
			justify-content: space-between;
			flex-direction: row;
		}
	}

	.bottom {
		padding: 10px 20px;

		button {
			line-height: 2.3;
			margin: 0 50px;
			height: 30pt;
			border-radius: 6pt;
		}
	}
	.drawer-close {
	  position: absolute;
	  top: 15px;
	  right: 15px;
	  z-index: 10;
	  padding: 5px;
	}
	.title{
		font-size: 1.2rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>